/*
 * POST PAGE ONLY (see further down for other categories)
 */
h4.comment-blurb
{
	margin-bottom: 5px;
}
pre
{
	-moz-tab-size: 3;
	-o-tab-size:   3;
	tab-size:      3;
}
 /* defines page width for all posts */
.post-content
{
	width: 860px;
}
.diagram-grid
{
	grid-area: gridscreenshot;
}
 /* All these .grid<area> selectors are used in the
  * .screenshot_grid_container selector. These names
  * have to match those used in the grid-template-areas
  * property. */
.gridheader
{
	grid-area: gridheader;
}
.gridscreenshot
{
	grid-area: gridscreenshot;
}
.gridterminal
{
	grid-area: gridterminal;
}
.gridsource
{
	grid-area: gridsource;
}
.screen_caption
{
	grid-area: screencaption;
}
.term_caption
{
	grid-area: termcaption;
}
.source_caption
{
	grid-area: sourcecaption;
}
.gridfooter
{
	grid-area: gridfooter;
	float: right;
	padding: 5px;
}
 /* The grid-template-columns are set to the width of the 
  * narrowest screenshot used in the simplest window demo.
  * The grid-column-gap property of 130px spaces the columns
  * out evenly over the post's page width of 860px. */
.screenshot_three_grid_container
{
	display: grid;
	z-index: 10;
	grid-column-gap: 130px;
	grid-template-columns: 200px 200px 200px;
	grid-template-areas:
		'gridheader gridheader gridheader'
		'gridscreenshot gridterminal gridsource'
		'gridfooter gridfooter gridfooter';
}
.screenshot_two_grid_container
{
	display: grid;
	z-index: 10;
	grid-column-gap: 130px;
	grid-template-columns: 200px 200px;
	grid-template-areas:
		'gridheader gridheader'
		'gridscreenshot gridterminal'
		'gridfooter gridfooter';
}

 /* I'm not sure if these are used or not. */
.right
{
	float: right;
	margin-left: 15px;
	max-width: 200px;
}

.left
{
	float: left;
	margin-left: 20px;
	max-width: 200px;
}
.center
{
	float: center;
	margin-right: 20px;
}

/* This selector formats paragraph text in the gridheader area. */
.screenshot_grid_header_blurb
{
	font-size: 20px;
	font-family: Arial, Helvetica, sans-serif;
}
.inpage_diagram
{
	background-color: #eee;
	z-index: 10;
	margin-top: 10px;
	margin-bottom: 20px;
	border: 20px;
}

.blog-nav
{
	background-color: #eee;
	z-index: 10;
	padding-top: 10px;
	padding-bottom: 40px;
	padding-left: 20px;
	padding-right: 20px;
}
 /* First full-on selector in this file. Formats the <figcaption> HTML tag. */
figcaption
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: italic;
}

.previous-next-div
{
	position: relative;
	z-index: 10;
	height: 20px;
	margin-bottom: 35px;
	margin-top: 35px;
	width: 720px;
}
th
{
	font-family: Arial, sans-serif, Helvetica;
}
td.text
{
	font-family: Times New Roman, serif, Century Schoolbook L;
}
td.code
{
	font-family: Courier New, Nimbus Mono L;
}
/*
added 2021-07-28
for use with auto-grid flow
 */
figcaption
{
	font-style: italic;
	font-size: 12px;
}
.columns
{
	margin: 1rem auto;
	width: min(90%, 75rem);
	display: grid;
	grid-auto-flow: row;
	gap: 1em;
}
.grid_header
{
	margin: 1rem auto;
	margin-top: 1px;
	width: min(90%, 75rem);
	display: grid;
	grid-auto-flow: row;
}
.grid_footer
{
	margin: 1rem auto;
	margin-top: 1px;
	width: min(90%, 75rem);
	display: grid;
	grid-auto-flow: row;
}
@media (min-width: 55em)
{
	.columns
	{
		grid-auto-flow: column;
	}
}